<template>
  <div class="layout">
    <Form v-for="(item,index) in form" :key="index" label-position="left" :label-width="100">
      <p class="form_title">订单详情</p>
      <FormItem label="订单id:">{{item.id}}</FormItem>
      <FormItem label="会员名称:">{{item.user_name}}</FormItem>
      <FormItem label="地址:">{{item.area}}</FormItem>
      <FormItem label="快递:">{{item.expressTitle}}</FormItem>
      <FormItem label="状态:">{{item.status}}</FormItem>
      <FormItem label="购买时间:">{{item.add_time}}</FormItem>
    </Form>

    <div class="table">
      <h3 class="table_title">订单商品列表</h3>
      <Table :columns="columns7" :data="date" title="订单商品列表"></Table>
    </div>
  </div>
</template>

<script >
  export default {
    data() {
      return {
        // 列表数据
        form: [],
        // 表格数据
        date: [],
        columns7: [
          {
            title: "商品",
            key: "imgurl",

            render: (h, params) => {
              return h(
                "div",
                {
                  style: { margin: "20px 20px 20px 0" ,}
                },
                [
                  h("img", {
                    attrs: {src: params.row.imgurl,},
                    style: {
                      width: "50px",
                      height: "50px",
                      float: "left"
                    }
                  }),
                  h("div",{style:{ fontSize:"14px"}},params.row.goods_title,)
                ]
              );
            }
          },

          {
            title: "类型",
            key: "goods_no"
          },
          {
            title: "价格",
            key: "real_price"
          }
        ]
      };
    },
    methods: {},
    mounted() {
      this.$axios({
        url: `/admin/order/getorderdetial/${this.$route.params.id}`
      }).then(res => {
        const { message, status } = res.data;
        const { goodslist, orderinfo } = message;
        if (status == 0) {
          // console.log(orderinfo);
          this.form.push(orderinfo);

          this.date = goodslist.map(v => {
            return {
              ...v,
              // imgurl:  `<img src="${v.imgurl}" alt="">`,
              imgurl: v.imgurl,
              goods_title: v.goods_title,
              goods_no: v.goods_no,
              real_price: v.real_price
            };
          });
          console.log(this.date);
        }
      });
    }
  };
</script>

<style scoped>
  .ivu-table td {
    background-color: #182328;
    color: #fff;
  }
  .layout {
    padding: 0 20px;
  }
  .layout form {
    font-size: 15px;
    font-weight: normal;
    /* color:violet; */
  }
  .layout > form > .form_title {
    font-weight: bolder;
  }
  .layout > form > .ivu-form-item {
    margin-bottom: 0px;
  }
  .table > .table_title {
    font-weight: bold;
    margin: 20px 0 20px 0;
  }
  .ivu-table-cell {
    margin: 100px 100px;
  }
</style>